<template>
	<div>
		<el-card>
			<!-- 搜索 & 筛选栏 -->
			<el-row>
				<el-col :span="11">搜索</el-col>
				<el-col :span="11">筛选</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="addDialogVisible = true">创建</el-button>
				</el-col>
			</el-row>

			<!-- 列表区域 -->
			<el-table :data="users" style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="scope">
						<!-- {{scope.row}} -->
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="圆滚滚的账号">
								<span>{{ scope.row.account }}</span>
							</el-form-item>
							<el-form-item label="圆滚滚的昵称">
								<span>{{ scope.row.nickname }}</span>
							</el-form-item>
							<el-form-item label="圆滚滚的生日">
								<span>{{ scope.row.birth | dateFormat('yyyy年MM月dd日') }}</span>
							</el-form-item>
							<el-form-item label="圆滚滚的电话">
								<span>{{ scope.row.phone }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column prop="nickname" label="昵称" width="150"></el-table-column>
				<el-table-column prop="role" label="角色">
					<template slot-scope="scope">
						<el-select
							value-key="_id"
							v-model="scope.row.role"
							placeholder="请选择"
							:disabled="scope.row.role.rid === 0"
							@change="handleRoleChange(scope.row)"
						>
							<el-option
								v-for="item in roles"
								:key="item._id"
								:label="item.title"
								:value="item"
								:disabled="!item.status || item.rid === 0"
							></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="是否启用">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							active-color="#13ce66"
							inactive-color="#ff4949"
							:disabled="scope.row.role.rid === 0"
							@change="handleStatusChange(scope.row)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="80">
					<!-- <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
					</el-tooltip>-->
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="删除" placement="top">
							<el-button
								type="danger"
								icon="el-icon-delete"
								size="small"
								:disabled="scope.row.role.rid === 0"
								@click="handleUserDelete(scope.row._id)"
							></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 创建用户面板 -->
		<el-dialog title="创建角色" :visible.sync="addDialogVisible">
			<el-form :model="addingUser" :rules="addUserRules" ref="addUserFormRef">
				<el-form-item label="圆滚滚的账号" :label-width="addingLabelWidth" prop="account">
					<el-input v-model="addingUser.account" autocomplete="off" />
				</el-form-item>
				<el-form-item label="圆滚滚的密码" :label-width="addingLabelWidth" prop="password">
					<el-input v-model="addingUser.password" autocomplete="off" type="password" />
				</el-form-item>
				<el-form-item label="确认圆滚滚的密码" :label-width="addingLabelWidth" prop="confirmPassword">
					<el-input v-model="addingUser.confirmPassword" autocomplete="off" type="password" />
				</el-form-item>
				<el-form-item label="圆滚滚的昵称" :label-width="addingLabelWidth" prop="nickname">
					<el-input v-model="addingUser.nickname" autocomplete="off" />
				</el-form-item>
				<el-form-item label="圆滚滚的真名" :label-width="addingLabelWidth" prop="realName">
					<el-input v-model="addingUser.realName" autocomplete="off" />
				</el-form-item>
				<el-form-item label="圆滚滚的电话" :label-width="addingLabelWidth" prop="phone">
					<el-input v-model="addingUser.phone" autocomplete="off" />
				</el-form-item>
				<el-form-item label="圆滚滚的角色" :label-width="addingLabelWidth" prop="role">
					<el-select v-model="addingUser.role" placeholder="请选择角色">
						<el-option
							v-for="item in roles"
							:key="item._id"
							:label="item.title"
							:value="item._id"
							:disabled="!item.status || item.rid === 0"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="圆滚滚的生日" :label-width="addingLabelWidth" prop="birth">
					<el-date-picker
						v-model="addingUser.birth"
						type="date"
						placeholder="选择日期"
						:picker-options="pickerOptions"
					></el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleAddConfirm">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import addUserRules from "./form-rules/addUserRules";
	import _ from "lodash";

	export default {
		name: "users-list",
		data() {
			return {
				users: [],
				roles: [],
				addDialogVisible: false,
				addingUser: {
					realName: "",
					role: {},
					avatar: null,
					nickname: "",
					account: "",
					phone: null,
					birth: new Date("2017-06-12"),
					password: "",
					confirmPassword: ""
				},
				addingLabelWidth: "140px",
				addUserRules,
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [
						{
							text: "默认",
							onClick(picker) {
								picker.$emit("pick", new Date("2017-06-12"));
							}
						},
						{
							text: "今天",
							onClick(picker) {
								picker.$emit("pick", new Date());
							}
						},
						{
							text: "十八年前",
							onClick(picker) {
								const date = new Date();
								picker.$emit(
									"pick",
									new Date(
										date.getFullYear() - 18,
										date.getMonth(),
										date.getDate()
									)
								);
							}
						}
					]
				}
			};
		},
		created() {
			this.getUsers();
			this.getRoles();
		},
		methods: {
			async getUsers() {
				this.users = await this.$http.get("/users");
			},
			async getRoles() {
				this.roles = await this.$http.get("/roles");
				// 设置创建用户表单中角色默认选中项
				this.addingUser.role = this.roles.find(role => role.rid === 4)._id;
			},
			async updateUser(user) {
				const reqData = _.omit(user, ["role"]);
				reqData.role = user.role._id || user.role;
				await this.$http.put(`/users/${user._id}`, user, true);
			},
			async deleteUser(_id) {
				if (!_id) return this.$message.error("指定删除的用户ID不能为空！");
				await this.$http.delete(`/users/${_id}`, true);
				this.users = this.users.filter(user => user._id !== _id);
			},
			// 确认创建用户事件
			handleAddConfirm() {
				this.$refs.addUserFormRef.validate(async valid => {
					if (!valid) return;
					this.addDialogVisible = false;
					const newUser = _.omit(this.addingUser, ["confirmPassword"]);
					await this.$http.post("/users", newUser, true);
					this.$refs.addUserFormRef.resetFields();
					this.getUsers();
				});
			},
			handleRoleChange(user) {
				this.updateUser(user);
			},
			handleStatusChange(user) {
				this.updateUser(user);
			},
			handleUserDelete(_id) {
				this.$confirm("是否确认删除?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
					.then(async () => {
						this.deleteUser(_id);
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			}
		}
	};
</script>

<style lang="scss">
	.demo-table-expand {
		font-size: 0;
		label {
			width: 120px;
			color: #99a9bf;
		}
		.el-form-item {
			margin-right: 0;
			margin-bottom: 0;
			width: 50%;
		}
	}
</style>